<template>
	<div>
		<div class="random">随机播放{{collect.length}}首歌曲
			<i class="Hui-iconfont Hui-iconfont-bofang"></i>
			</div>
		<scroll ref="member" :data="collect" class="member">
			
		<ul class="mui-table-view">
			<li class="mui-table-view-cell" v-for="(todo,index) in collect" @click.stop="playcoll(todo.title)">
				
				<span class="tit">{{todo.title}}</span><br>
				<span class="singer">{{todo.singer}}</span>
			</li>

		</ul>
		</scroll>
	</div>
</template>

<script>
	import Scroll from './scroll'
	import { mapGetters } from 'vuex'
	export default {
		computed: mapGetters([
			"collect",
			'searchlist',

		]),
		methods: {
			playcoll(content) {

				var _this = this

				this.$http.get('/search' + "?keywords=" + content).then((res) => {
					//_this.searchlist = res.data.result.albums;

					var datas = res.data.result
					_this.$store.dispatch('searchlist', datas)
					var thissong = this.searchlist.songs[0]
					_this.$store.dispatch('dataurl', thissong)
					_this.$store.dispatch('isplaying')
				})

			},
		},
		components:{
			Scroll
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.random{
		color: #fff;
		padding: 25px;
		margin-top:10vh;
	}
.member{
	height: 87.6vh;

	overflow: hidden;

	width: 100%;
	
	ul {
					background: none;
					.mui-table-view-cell {
						border-bottom: 1px solid #fff;
						padding:30px;
						.tit{
							font-size: 18px;	
							color: #fff;
						}
						.singer{
							font-size: 14px;	
							color: #fff;
						}
						&:after{
							background: none;
						}
						
					
					}
				}
}
</style>